import Nerv from "nervjs";
import { View, Button } from '@tarojs/components';
import Taro from "@tarojs/taro-h5";
// https://jspang.com/detailed?id=59#toc237
// https://taro.aotu.io/

class Blog extends Taro.Component {
  render() {
    // useState 一定要有一个初始值
    const [blogTtile, setBlogTtile] = Taro.useState('这里是传递的第一个参数');
    const [blogTtile2, setBlogTtile2] = Taro.useState('这里是传递的第二个参数');
    const navigateToGotoIndex = () => {
      // 最普通的路由跳转
      Taro.navigateTo({
        url: "/pages/index/index?blogTtile=" + blogTtile + '&blogTtile2=' + blogTtile2
      });
    };
    // 路由重定向 当前页面会在页面栈中消失
    const redirectToGotoIndex = () => {
      Taro.redirectTo({
        url: "/pages/index/index"
      });
    };

    const myForArr = [{
      id: 1,
      name: '春华'
    }, {
      id: 2,
      name: '菜溪'
    }, {
      id: 3,
      name: '浚县'
    }, {
      id: 4,
      name: '欧欧'
    }];
    let myIf = 1;
    console.log('myIf: ', myIf);
    return <View>
            这里是blog页面
            <Button onClick={navigateToGotoIndex}>跳转至index页面</Button>
       <Button onClick={redirectToGotoIndex}>路由重定向到index页面</Button>
      {myForArr.map((v, i) => <View key={i}>{v.id + ':' + v.name}</View>)}
      {myForArr.map((v, i) => <View key={i}>{myIf == i ? v.name : ''}</View>)}
      {myForArr.map((v, i) => <View>
           {v.id == myIf && v.name}
          </View>)}
      
        </View>;
  }

  componentDidMount() {
    super.componentDidMount && super.componentDidMount();
  }

  componentDidShow() {
    super.componentDidShow && super.componentDidShow();
  }

  componentDidHide() {
    super.componentDidHide && super.componentDidHide();
  }

}

export default Blog;

// ! 跳转到目的页面，打开新页面
// Taro.navigateTo({
//     url: '/pages/page/path/name'
//   })

// ! 跳转到目的页面，在当前页面打开
//   Taro.redirectTo({
//     url: '/pages/page/path/name'
//   })

// navigateTo: 
// 最基本的跳转方式，可以返回上级页面。三端都支持的，小程序、H5、React Native。
// redirectTo：
// 不记录上集页面，直接跳转。三端都支持的，小程序、H5、React Native。
// switchTab： 
// Tab之间进行切换，这个要配合Taro的导航栏一起使用，三端都支持的，小程序、H5、React Native。
// navigateBack:
//  返回上一级页面，这个在小程序中常使用，三端都支持的，小程序、H5、React Native。
// relaunch：
// 关闭所有额面，打开到应用内某个页面。三端都支持的，小程序、H5、React Native。
// getCurrentPages:
// 获取当前页面信息所用，这个H5是不支持的。（注意）